<script setup>
import {ref} from 'vue'
const form = ref(0)
//表单数据
const formData = ref({
	name:'',
	age:'',
	kg:'',
	type:'',
	getYm:'',
	chara:'',
	sex:0,
	Jyu:0
})
const submitForm = ()=>{
form.value.validate()
}
//校验规则
const rules={
				// 对name字段进行必填验证
				name: {
					rules: [{
							required: true,
							errorMessage: '请输入姓名',
						},
						{
							minLength: 1,
							maxLength: 6,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}
					]
				},
				age:{
					rules:[
						{
							required:true,
							errorMessage: '请输年龄'
						},
						{
							minLength: 1,
							maxLength: 6,
							errorMessage: '年龄长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern:/[1-9]$/,
							errorMessage: '必须是数字类型'
						}
					]
				},
				kg:{
					rules:[
						{
							required:true,
							errorMessage: '请输入体重'
						},
						{
							minLength: 1,
							maxLength: 6,
							errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern:/[1-9]$/,
							errorMessage: '必须是数字类型'
						}
					]
				},
				type:{
					rules:[
						{
							required:true,
							errorMessage: '请输入猫的种类'
						},
						{
							minLength: 1,
							maxLength: 12,
							errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
						}
					
					]
				},
				getYm:{
					rules:[
						{
							required:true,
							errorMessage: '必填项'
						},
						{
							minLength: 1,
							maxLength: 60,
							errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
						}
					]
				},
				chara:{
					rules:[
						{
							required:true,
							errorMessage: '必填项'
						},
						{
							minLength: 1,
							maxLength: 60,
							errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
						}
					]
				}
			}
		
const sexs= [{
 text: '男生',
 value: 0
},
{
text: '女生',
value: 1
}]

const Jyu = [{
text: '是',
value: 0
},
{
text: '否',
value: 1
}]
</script>

<template>
	<view class="content">
		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item  label="姓名"  label-width="100rpx" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					
					<uni-forms-item label="年龄"  label-width="100rpx" name="age">
						<uni-easyinput type="number" v-model="formData.age" placeholder="请输入年龄(月)" />
					</uni-forms-item>
					
					<uni-forms-item label="体重"  label-width="100rpx" name="kg">
						<uni-easyinput type="number" v-model="formData.kg" placeholder="请输入体重(kg)" />
					</uni-forms-item>
					
					<uni-forms-item label="性别"  label-width="100rpx" name="name">
						<uni-data-checkbox selectedColor="#ffc106" v-model="formData.sex" :localdata="sexs"/>
					</uni-forms-item>
					
					<uni-forms-item  label="种类"  label-width="100rpx" name="type">
						<uni-easyinput  type="text" v-model="formData.type" placeholder="请输入种类" />
					</uni-forms-item>
					<uni-forms-item label="是否绝育"  label-width="100rpx" name="name">
						<uni-data-checkbox selectedColor="#ffc106" v-model="formData.Jyu" :localdata="Jyu"/>
					</uni-forms-item>
					
						<uni-forms-item label="接种疫苗" label-width="100rpx" name="getYm">
											<uni-easyinput type="textarea" v-model="formData.getYm" placeholder="有多个疫苗用逗号隔开" />
										</uni-forms-item>
										
					<uni-forms-item  label="性格"  label-width="100rpx" name="chara">
					<uni-easyinput  type="textarea" v-model="formData.chara" placeholder="输入宠物性格" />
					</uni-forms-item>
				</uni-forms>
				<button class="sub-form" @click="submitForm">提交</button>
		</view>
	</view>
</template>


<style lang="scss" scoped>
.form{
	width: 690rpx;
	height: 100vh;
	margin: 0 auto;
	padding:20rpx 0 0 0;
	.sub-form{
		height: 90rpx;
		width: 450rpx;
		background-color: #ffe996;
		border-radius: 30rpx;
		border: 2px solid black;
		line-height: 80rpx;
	}
}
</style>
